Error: Hydration failed because the initial UI does not match what was rendered on the server.
#WIP
Hydration mismatch
以下の2つのHTMLに差異があることで生じるerror
browser側でrenderingされているHTML
server側でrenderingされているHTML
Content Modelを無視したHTMLを書いているとこのエラーが起きる
web broserが不正なHTMLを自動的に直すから、hydrationのものとmismatchが起きる
https://twitter.com/uhyo_/status/1522386973918638080
例えば、
pタグの中にdivタグがあった時に怒られた
Expected server HTML to contain a matching <div> in <div>.もあった
https://blog.ojisan.io/next-nest-ng/
https://qiita.com/ssssota/items/51278dc5d51801dfb3fc
useSyncExternalStoreを使って対応する
(未解決)styled-componentsをSSGで使うとstyleが崩れることがあるの問題が生じる部分でも起きやすくなる
しかしこっちは解決策がわかっていないので修正のしようがない..mrsekut.icon
と、思ったが寧ろ根本的な原因がError: Hydration failed because the initial UI does not match what was rendered on the server.の方にあるのでは